<template>
  <div>
    <el-row justify="center">
      <el-col :span="18">
        <div v-show="data.length==0" class="no">
          <h1>暂无数据记录</h1>
        </div>
        <ul>
          <li class="car-list" v-for="(item,index) in data" :key="index">
            <div class="isCheck-box"><span @click="checkSpan(item,index)" :class="{checkSpan:item.isChecked==true}"></span></div>
            <div class="img-box"><img :src="item.path"></div>
            <div class="des-box">
                <div class="a1"><h1>{{ item.name }}</h1></div>
                <div class="a2"><h2>{{ item.carSize }}</h2></div>
                <div class="a3"><h2>{{ item.price }} W</h2></div>
                <div class="count a4">
                  <button class="min" @click="min(item)" :class="{disab:item.count<=0}">-</button>
                  <span class="count-number">{{ item.count>=0? item.count:item.count=0 }}</span>
                  <button class="add" @click="add(item)">+</button>
                </div>
                <div class="a5"><h3>小计：{{ subtotal(item) }}</h3></div>
                <div class="a6"><p class="del" @click="del(item,index)">删除</p></div>
            </div>
          </li>
        </ul>
        <div class="pay-bar" v-show="data.length!=0">
          <!-- 全选 -->
          <div class="checkAll-box">
            <div @click="checkAll" :class="{flag1:flag1}"></div>
            <div>全选</div>
          </div>
          <!-- 数量 -->
          <div class="numbers">已选数量：<span class="ft16">{{ checkedNum }}</span></div>
          <!-- 总价 -->
          <div class="sum-pirce">总价：<span>{{ sumPrice }}</span><span v-show="sumPrice!=0">W</span></div>
          <!--支付按钮-->
          <div class="pay-button" @click="payButton">支付</div>
        </div>
      </el-col>
    </el-row>
    <div>
      <Footer/>
    </div>
  </div>
</template>

<script>
import { computed, reactive, ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import Footer from '../views/Footer.vue'
export default {
  components:{
    Footer
  },
  name: '',
  setup() {
    const router = useRouter()
    //获取令牌
    const token =ref()
    token.value = sessionStorage.token

    //请求数据
    const data = ref([])
    const getData = ()=>{
      axios.get('http://localhost:3000/shopcar?flagNumber='+token.value).then(res=>{
        data.value = res.data
      })
    }

    //判断是否登录
    const isLogin=()=>{
      if(token.value==null){
        ElMessage('请登录')
        router.push('login')
      }else{
        getData()
      }
    }
    isLogin()

    //选择框
    const checkSpan = (item,index)=>{
      item.isChecked=!item.isChecked
      let num = data.value.filter(item=>item.isChecked).length
      if(num==data.value.length){
        flag1.value=true
      }else{
        flag1.value = false
      }
    }

    //减按钮
    const min = (item)=>{
      let num = --item.count
      return num
    }

    //加按钮
    const add = (item)=>{
      let num = ++item.count
      return num
    }

    //小计
    const subtotal=(item)=>{
      return (item.price*100) * (item.count*100)/10000
    }

    //全选
    const flag1 = ref(false)
    const checkAll = ()=>{
      flag1.value = ! flag1.value
      data.value.forEach(item=>{
        item.isChecked = flag1.value
      })
    }

    //删除
    const del = (item,index)=>{
      data.value.splice(index,1)
      //调用删除请求
      delServer111(item)
      //重新请求数据刷新页面
      getData()
    }

    //json-server中对应删除
    const delServer111 = (item)=>{
      axios.delete('http://localhost:3000/shopcar/'+item.id).then(res=>{
        ElMessage({
          showClose: true,
          message: '删除成功',
          center: true,
        })
      })
    }
    
    //已选择的数量
    const num1 = ref()
    const checkedNum =computed(()=>{
      let sum = 0
      data.value.forEach(item=>{
        if(item.isChecked){
         sum += item.count
        }
      })
      num1.value = sum
      return sum
    })
    
    // 总价
    const sumPrice = computed(()=>{
      let sum=0
      data.value.forEach(item=>{
        if(item.isChecked){
          sum+= (item.count*100)*(item.price*100)/10000
        }
      })
      return sum
    })

    //选中的数据数组
    const checkedArr = ref([])
    //选中数据的索引
    const checkedIndexArr = ref([])
    //选中数据的id
    const checkedIdArr = ref([])
    const getCheckData = ()=>{
      checkedArr.value = []
      checkedIndexArr.value=[]
      checkedIdArr.value = []
      data.value.forEach((item,index)=>{
        if(item.isChecked){
          checkedArr.value.push(item)
          checkedIndexArr.value.push(index)
          checkedIdArr.value.push(item.id)
        }
      })

    }

    //页面多选删除选中的数据  ok
    const del1 = ()=>{
      for(let i=0; i<data.value.length;i++){
        if(data.value[i].isChecked){
          data.value.splice(i,1)
          i=-1
        }
      }
    }

    //将数据数组对象添加到order列表  有问题  已解决
    const add1 =async (arrObj)=>{
      //拷贝一份
      let arr = JSON.parse(JSON.stringify(arrObj)) 
      for(let i=0;i<arr.length;i++){
        delete arr[i].id
        await  axios.post('http://localhost:3000/order',arr[i]).then(res=>{
        })
      }

      //加入订单后完成后就删除
      del111(checkedIdArr.value)
      
    }

    //将数据从shopcar中删除  完全ok
    const del111 =async (idArr)=>{
      for(let i=0;i<idArr.length;i++){
        await axios.delete('http://localhost:3000/shopcar/'+idArr[i]).then(res=>{
        })
      }
    }

    //支付按钮
    const payButton =()=>{
        if(num1.value==0){
          ElMessage({
            showClose: true,
            message: '请选择商品',
            center: true,
          })
        }else{
          //保存选中的数据
          getCheckData()
          
          //将数据数组对象添加到order  有问题  随缘  已解决
          add1(checkedArr.value)
         
          //页面删除选中的数据
          del1()           
        }
    }

    return {
      data,subtotal,del,min,add,checkSpan,checkedNum,checkAll,flag1,payButton,sumPrice
    }
  },
}

</script>
<style scoped lang='scss'>
    ul li{
      list-style-type: none;
    }
    .no{
      height: 750px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .car-list{
      box-sizing: border-box;
      border: 1px black solid;
      padding: 5px;
      margin-bottom: 5px;
      display: flex;
      &:first-child{
        margin-top: 5px;
      }
      &:last-child{
        margin-bottom: 0;
      }
      //选择框
      .isCheck-box{
        width: 3%;
        display: flex;
        align-items: center;
        span{
          display: block;
          width: 15px;
          height: 15px;
          border: 1px black solid;
          cursor: pointer;
        }
        .checkSpan{
          background-color: black;
        }
      }
      //图片
      .img-box{
        width: 30%;
        img{
          width: 100%;
        }
      }
      //描述信息
      .des-box{
        width: 67%;
        padding-right: 10px;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        .a1{
          width: 30%;
        }
        .a2{
          width: 15%;
        }
        .a3{
          width: 15%;
        }
        .a4{
          width: 15%;
        }
        .a5{
          width: 20%;
        }
        //数量
        .count{
          .count-number{
            display:inline-block;
            width: 17px;
            text-align: center;
          }
          //加减
         .min,.add{
          padding: 3px;
          background-color: black;
          color: white;
          cursor: pointer;
          border: none;
         }
         .disab{
          background-color: aliceblue;
         }
        }
        //删除
         .del{
          cursor: pointer;
         }
      }
    }
    .pay-bar{
      border: 1px black solid;
      padding: 5px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .checkAll-box{
        display: flex;
        align-items: center;
        div:nth-child(1){
          width: 15px;
          height: 15px;
          border: 1px black solid;
          box-sizing: border-box;
          cursor: pointer;
          margin-right: 5px;
        }
      }
      // 数量
      .numbers{
        margin-left: 30%;
      }
      //总价
      .sum-pirce{
        width: 150px;
        margin-left: 10%;
        span{
          font-size: 20px;
          font-weight: 600;
          margin-right: 5px;
        }
      }
      //支付按钮
      .pay-button{
        margin-left: 15%;
        width: 20%;
        padding: 5px;
        text-align: center;
        letter-spacing: 0.2em;
        background-color: black;
        color: white;
        cursor: pointer;
        font-size: 1.2em;
        font-weight: 600;
      }
      .flag1{
        background-color: black;
      }
    }
    .ft16{
      font-size:20px;
      font-weight: 600;
    }
   
</style>